<template>
    <div>
      <div  style="text-align: center;font-weight: bold;font-size: 25px;"> vue本地文件上传预览</div>
      <el-upload
        class="upload-demo"
        action="#"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-change="onchangeFile"
        :limit="10"
        :show-file-list="false"
        :on-exceed="handleExceed"
        :http-request="selfdefinedupload"
        >

        <el-button size="small" type="primary"> <i class="el-icon-upload"></i> 点击上传</el-button>
        <div slot="tip" class="el-upload__tip">提示语</div>
      </el-upload>

      <hr>
      <div>预览区域</div>
      <el-button @click="dialogVisible=true">预览</el-button>
      <br>
      <br>
      <div style="height: 600px;width: 1000px;border:1px solid #e8e8e8;">

      </div>


      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
       >
        <el-row :gutter="20">
          <el-col :span="6" :offset="1">
            <el-button type="text" @click="fileDownload">下载文件</el-button>
            <el-button type="text" @click.stop="clock">顺时针旋转</el-button>
            <el-button type="text" @click.stop="counterClock">逆时针旋转</el-button>
          </el-col>
        </el-row>

        <div>
<!-- @loaded  pdf加载的时候执行-->
<!-- @num-page监听pdf的加载，获取pdf总页数-->
<!-- @page-loaded是pdf加载成功的回调（应该是范围换页后的页码）-->
          <pdf
            :src="src"
            height="200px"
            :page="currentPage"
            :rotate="pageRotate"
            @num-pages="pageCount=$event"
            @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="3"><el-button type="text" @click="changePdfPage(0)">上一页</el-button></el-col>
            <el-col :span="3"><el-button type="text" disabled style="color:black">{{ currentPage }} / {{ pageCount }}</el-button></el-col>
            <el-col :span="3"><el-button type="text" @click="changePdfPage(1)">下一页</el-button></el-col>
          </el-row>
        </span>
      </el-dialog>
    </div>

</template>

<script>
  import { renderAsync } from 'docx-preview'
  import * as XLSX from 'xlsx/xlsx.js'
  import * as mammoth from 'mammoth' // docx 文件预览
  // import * as vuePdf from "vue-pdf"
  import pdf from "vue-pdf"
    export default {
      name: "T",
      components:{
        pdf
      },
      created() {

      },
      mounted() {

      },
      computed:{

      },
      data(){
        return {
          dialogVisible: false,
          file: null, //保存的文件对象

          dialogTableVisible: false,
          currentPage: 1, // pdf文件页码
          pageCount: 0, // pdf文件总页数
          fileType: 'pdf', // 文件类型
          pageRotate: 0,
          fileID: '',
          src: '' // pdf文件地址

        }
      },
      methods:{
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },

        onchangeFile(file,fileList){
          console.log(file,fileList)
          this.file = file.raw
          console.log(' this.file ', this.file )
          // this.imgSrc = URL.createObjectURL(this.file)
          // console.log("this.imgSrc ",this.imgSrc ) // 这种图片预览也行 会转成本地文件 http:...

          const type = file.name.substring(file.name.lastIndexOf('.') + 1) // 获取文件类型
          console.log("文件类型",type)

          if (type=="pdf"){

            var blob = new Blob([this.file],{type:"application/pdf"});

            // 用pdf.js
            var blobUrl = URL.createObjectURL(blob);
            var blobUrl2 = pdf.createLoadingTask(blobUrl)
            this.src = blobUrl2
            this.src.promise.then(pdf => {
              this.pageCount = pdf.numPages;  // pageTotalNum 貌似都是页码
            });
          }
        },

     /*   open(url, fileID) {
          this.dialogTableVisible = true
          this.src = url
          this.fileID = fileID
          this.loadPdfHandler()
        },*/
        fileDownload() {
          // location.href = `nifa-autonomy-file/upload/download/${this.fileID}`
        },
        changePdfPage(val) {
          if (val === 0 && this.currentPage > 1) {
            this.currentPage--
          }
          if (val === 1 && this.currentPage < this.pageCount) {
            this.currentPage++
          }
        },
        clock() {
          this.pageRotate += 90
        },
        counterClock() {
          this.pageRotate -= 90
        },
        // pdf加载时
        loadPdfHandler(e) {
          this.currentPage = 1 // 加载的时候先加载第一页
          this.pageRotate = 0
        },

        selfdefinedupload(){

          console.log("自定义上传覆盖action自动上传方式")
        }
      },
      watch:{

      },
      beforeDestroy() {

      }

    }
</script>

<style scoped lang="scss">
/* .pdf-preview {
   height: 50%;
 }
  .pdf-preview canvas{
    height: 50% !important;
  }*/


.pdf-dialog .el-dialog__body {
  height: calc(100vh - 450px);
  overflow: auto;
  padding: 0px;
}
.pdf-dialog .el-dialog__header {
  overflow: auto;
  padding: 10px 0px 2px 20px;
}
.radio-class .el-checkbox__inner {
  height: 20px;
  width: 20px;
}
.radio-class .el-checkbox__label {
  font-size: 25px;
}
</style>
